<template>
  <q-btn v-bind="btnProps">
    <q-menu v-model="isShow" class="bg-transparent no-shadow" style="padding:2px" cover anchor="center middle" transition-show="flip-up" transition-hide="flip-down">
      <q-btn :loading="doing" v-bind="popBtnProps" @click="handle" />
    </q-menu>
  </q-btn>
</template>

<script setup>
import {
  mdiClose,
  mdiCloseThick,
} from '@quasar/extras/mdi-v6'

const props = defineProps({
  handleFn: {
    type: Function,
    default: () => {},
  },
  pop: {
    type: Object,
    default() {
      return {}
    },
  },
})

const attrs = useAttrs()

defineOptions({
  name: 'ConfirmPopButton',
})

const isShow = ref(false)
const doing = ref(false)
const curDelBtn = ref(false)

const btnProps = computed(() => {
  return { size: 'sm', icon: mdiClose, color: 'warning', ...attrs }
})

const popBtnProps = computed(() => {
  const { size } = btnProps.value
  return { size, icon: mdiCloseThick, color: 'red', ...props.pop }
})

async function handle() {
  doing.value = true
  await props.handleFn()
  isShow.value = false
  doing.value = false
}
</script>
